<template>
    <div class="wrapper">
        <div class="banner">
		    <div class="img"><img src="http://47.75.99.213/app/cdn/order-banner.png"></div>
        </div>
        <div class="blank-5"></div>
        <div class="order-news-list">
            <div class="news-item" v-for="(item,index) in newsList" :key="index" @click="changeToOrderNews(item)">
                <div class="top"></div>
                <div class="bot">{{item.name}}</div>
            </div>
        </div>
        <div class="blank-5"></div>
    </div>
</template>

<script>
import { Toast } from 'mint-ui';
import { getNewsOrderList } from '@/api/api'
export default {
    data: function () {
        return {
            newsList:[]
        }
    },
    mounted(){
        this.getNewsOrder();
    },
    methods: {
        changeToOrderNews(item){
            this.$router.push({
                name : 'orderNews',
                query:{ 
                    classId : item.classId,
                    name : item.name
                }
            })
        },
        getNewsOrder(){
            getNewsOrderList().then(res => {
                if( res.code == 200 ){
                    this.newsList = res.data;
                }else{
                    Toast({
                        message: res.resMsg
                    });
                    this.sendMsgDisabled = false;
                }
            })
        }
    }
}
</script>

<style lang="stylus" scoped>
.wrapper{
    .banner{
        margin-bottom:15px;
    }
    .order-news-list{
        display:flex;
        flex-wrap:wrap;
        justify-content:space-around;
        .news-item{
			width:30%;
            margin:20px auto 20px;
            text-align:center;
            .top{
                width:30px;
                height:30px;
                margin: 0 auto;
                background:url(http://47.75.99.213/app/cdn/order-img-1.png) no-repeat 0 0;
                background-size:100% 100%;
            }
            .bot{
                color:#333333;
                font-size:15px;
                margin-top:10px;
            }
            &:nth-child(2){
                .top{
                    background:url(http://47.75.99.213/app/cdn/order-img-2.png) no-repeat 0 0;
                    background-size:100% 100%;
                }
            }
            &:nth-child(3){
                .top{
                    background:url(http://47.75.99.213/app/cdn/order-img-3.png) no-repeat 0 0;
                    background-size:100% 100%;
                }
            }
            &:nth-child(4){
                .top{
                    background:url(http://47.75.99.213/app/cdn/order-img-4.png) no-repeat 0 0;
                    background-size:100% 100%;
                }
            }
            &:nth-child(5){
                .top{
                    background:url(http://47.75.99.213/app/cdn/order-img-5.png) no-repeat 0 0;
                    background-size:100% 100%;
                }
            }
            &:nth-child(6){
                .top{
                    background:url(http://47.75.99.213/app/cdn/order-img-6.png) no-repeat 0 0;
                    background-size:100% 100%;
                }
            }
            &:nth-child(7){
                .top{
                    background:url(http://47.75.99.213/app/cdn/order-img-7.png) no-repeat 0 0;
                    background-size:100% 100%;
                }
            }
            &:nth-child(8){
                .top{
                    background:url(http://47.75.99.213/app/cdn/order-img-8.png) no-repeat 0 0;
                    background-size:100% 100%;
                }
            }
            &:nth-child(9){
                .top{
                    background:url(http://47.75.99.213/app/cdn/order-img-9.png) no-repeat 0 0;
                    background-size:100% 100%;
                }
            }
		}
    }
}  
</style>